<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"></script>
    <style>
        li {
            line-height: 40px;
            text-indent: 16px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div id="app">

        <p>count:{{count}}</p>
        <p>doubleCount:{{doubleCount}}</p>
        <p>tripleCount:{{tripleCount}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
    </div>
</body>
<script>
    // 一般情况下,不建议v-for和v-if同时使用, 如果v-for和v-if同时使用 v-for的优先级高于v-if,先将元素重复n次,在逐个判断每个元素是否渲染

    // methods => 每次Vue在解析模版为虚拟DOM时,函数都会执行一次 => 得到函数的执行结果 => 放到模版中

    // 计算属性 (派生值/衍生值)   -> 也会挂载到Vue实例中
    // 可以依赖data中的一个或多个属性得到一个新值(派生值/衍生值), 如果依赖的数据没有发生改变,会一直使用缓存的结果,如果依赖的数据发生改变,会重新调用函数得到新的结果,并缓存

    // 计算属性是基于它的响应式依赖来进行缓存的

    // 计算属性
    // 1. 根据data中原有的属性得到的一个新属性(派生值/衍生值) 注意:计算属性也可以依赖于其他的计算属性
    // 2. 计算属性初始化阶段会默认执行一次,并缓存执行的结果(初始值)
    // 3. 计算属性依赖的数据发生改变, 会重新执行函数并缓存新的结果
    // 4. 如果计算属性中没有依赖的数据, 那么只会在初始化阶段执行一次,后续结果不在更改

    // 计算属性的变化是被动的 => 只有依赖的数据发生改变,计算属性才会改变 => 更注重其他数据改变,对自身造成的影响

    // watch 数据监听    => 监听数据改变,并执行一系列副作用操作
    // 常用于监听data上对应属性的变化, 也可以用于监听计算属性

    // 注意:
    // 1. watch监听数据时是惰性的,  只有当监听的数据改变时,才会执行对应的回调函数
    // 2. watch更注重自身的变化对其他数据造成的影响
    // 3. watch可以监听数组的变化, watch监听对象数据时默认是浅层的


    var app = new Vue({
        el: "#app",
        data: {
            count: 1,
            doubleCount: null,
            tripleCount: null,
        },
        methods: {

        },
        computed: {

        },
        watch: {
            // 对象的键名 => 需要监听的数据的属性名
            // 对象的健值 => 回调函数  => 当数据发生改变时执行的回调函数, 回调函数有两个形式参数,分别表示修改后的新值和旧值
            count: function (newVal, oldVal) {
                console.log("count发生了改变", newVal, oldVal);

                // 当前监听的数据发生改变 对其他数据造成的影响(副作用操作)
                this.doubleCount = newVal * 2;
                this.tripleCount = newVal * 3;

            }
        }

    })


</script>

</html>